import {Button, Card, Divider, Space} from "antd"
import Children from "./children"
import {useState} from "react"
import Counter from "../../../../components/counter"
import ShowRedux from "../../../../components/show-redux"

const Example = () => {
    // useState 用于声明一个状态变量, 只有通过 useState 声明的变量才能实现双向绑定
    // 这里的 redText 就是一个状态变量, setRedText 就是一个修改 redText 的方法
    // redText 的值只能通过 setRedText 来修改
    const [redText, setRedText] = useState(false)

    const [btnType, setBtnType] = useState("default")

    const setRed = () => {
        setRedText(!redText)
    }

    const textStyle = {
        color: redText ? "red" : ""
    }

    return (
        <div className="h-full overflow-auto">
            <ShowRedux/>

            <Space className="pb-20px">
                <Counter/>
                {/* 你可以随意复用你的组件, 他们的数据是 '独立' 的 */}
                <Counter initialValue={10}/>
            </Space>

            <Card title="这是一个示例组件">
                {/* {"color": redText ? "red" : ""} 是传入了一个对象 */}
                <div style={{"color": redText ? "red" : ""}}>
                    balabalabalabala...
                </div>

                {/* 这种写效果是一样的 */}
                <div style={textStyle}>
                    balabalabalabala...
                </div>

                <Divider/>

                {/* 这里展示了如何显示变量 */}
                <div className="py-10px font-600">
                    变量 redText 👉 {redText ? "true" : "false"}
                </div>
                <div className="py-10px font-600">
                    变量 btnType 👉 {btnType}
                </div>

                {/* 条件渲染 */}
                {redText && (
                    <div className="text-green">
                        我只有在 redText 为 true 时才会显示
                    </div>
                )}
                {redText || (
                    <div className="text-red">
                        我只有在 redText 为 false 时才会显示
                    </div>
                )}

                {/* 条件渲染的另一种写法 */}
                {redText ? (
                    <div className="text-green">
                        我只有在 redText 为 true 时才会显示
                    </div>
                ) : (
                    <div className="text-red">
                        我只有在 redText 为 false 时才会显示
                    </div>
                )}

                <Children changeColor={setRed} btnType={btnType}/>

                <Button className="mt-20px"
                        type="primary"
                        onClick={() => setBtnType(btnType == "primary" ? "default" : "primary")}>
                    点我更改子组件的按钮样式
                </Button>
            </Card>
        </div>
    )
}

export default Example
